<template>
	<div>
		<!-- 这2种使用方式没有区别 -->
		<!-- 使用state的第一种方式 -->
		<!-- {{ $store.state.count }} -->
		<!-- <h3>count的值：{{ count }}</h3> -->
		
		<!-- 使用getter的第一种方式 -->
		<!-- <h3>{{$store.getters.showCount}}</h3> -->
		<!-- 使用getter的第二种方式 -->
		<h3>{{showCount}}</h3>
		
		<p>-----------------------</p>
		n=<input type="number" v-model="num">
		<br>
		<!-- <button @click="handle1">+1</button>
		<button @click="handle2">+n</button>
		<button @click="handle3">async +1</button>
		<button @click="handle4">async +n</button> -->
		
		<button @click="add">+1</button>
		<button @click="addN(num)">+n</button>
		<button @click="asyncAdd">async +1</button>
		<button @click="asyncAddN(num)">async +n</button>
	</div>
</template>

<script>
//使用state的第二种方式
//按需 从Vuex中 引入 mapState 函数
import { mapState } from 'Vuex'
//使用mutations的第二种方式
//按需 从Vuex中 引入 mapMutations 函数
import { mapMutations } from 'Vuex'
//使用actions的第二种方式
//按需 从Vuex中 引入 mapActions 函数
import { mapActions } from 'Vuex'
//使用getters的第二种方式
//按需 从Vuex中 引入 mapGetters 函数
import { mapGetters } from 'Vuex'

	export default {
		data(){
			return {
				num: 0
			}
		},
		methods:{
			//触发mutation的第二种方式
			//使用 "..."扩展运算符 把要使用的mutation 映射为 当前组件的methods
			...mapMutations(['add', 'addN']),
			//触发action的第二种方式
			//使用 "..."扩展运算符 把要使用的actions 映射为 当前组件的methods
			...mapActions(['asyncAdd', 'asyncAddN']),
			
			handle1(){
				//触发mutations的第一种方式
				// this.$store.commit('add')
				this.add()
			},
			handle2(){
				// this.$store.commit('addN', this.num)
				this.addN(this.num)
			},
			handle3(){
				//触发actions的第一种方式
				// this.$store.dispatch('asyncAdd')
				
				this.asyncAdd()
			},
			handle4(){
				// this.$store.dispatch('asyncAddN', this.num)
				
				this.asyncAddN(this.num)
			}
		},
		computed: {
			//使用 state的第二种方式
			//使用 "..."扩展运算符 把要使用的全局数据 映射为 当前组件的计算属性
			...mapState(['count']),
			//使用getters的第二种方式
			...mapGetters(['showCount'])
		}
	}
</script>

<style>
</style>
